@charset "UTF-8";
@import "theme";



$active-bgcolor: rgba(0, 126, 255, 0);
$active-bordercolor:rgba(96, 98, 101, 0.56);

$over-bgcolor: rgba(239, 0, 0, 0.04);
$over-bordercolor: rgba(255, 0, 0, 0.56);

$hover-bgcolor: rgba(0, 0, 208, 0.04);
$hover-bordercolor: rgba(0, 0, 191, 0.56);

.content-editor{

  .paper-title{
    font-size:16px;
    font-weight:bold;
    color:$primary;
    margin:10px auto;
    text-align:center;
  }

  .paper-intro{
    font-size:12px;
    color:$grey-dark;
    margin:15px auto;
    text-align:left;
  }

  .entity-container{
    margin:15px auto;
  }

  .entity-wrap{
    &:after{
      content:"";
      clear:both;
    }
    .serial{
      width:24px;
      float:left;
      font-size:16px;
      font-weight:bold;
      color:$primary;
    }
    .control{
      margin-left:30px;
    }
  }

  .content-editor-append{
    height:43px;
    line-height:43px;
    border:1px dotted #c5c5c5;
    border-radius:5px;
    &.dragover{
      background-color: $over-bgcolor;
    }
  }

  .content-editor-entity{
    border:1px solid rgba(255, 255, 255, 0);
    padding:5px;

    &.dragover{
      background-color: $over-bgcolor;
      border:1px dashed $over-bordercolor;
    }
    &.active{
      background-color: $active-bgcolor;
      border:1px dotted $active-bordercolor;
    }
    &:hover{
      background-color: $hover-bgcolor;
      border:1px dashed $hover-bordercolor;
    }
  }

  .entity-insertor{
    background-color: $active-bgcolor;
    border:1px dashed $active-bordercolor;
    height:24px;
  }



  .remove-entity{
    text-align:right;
    height:0;
    i{
      color: #f97333c7;
      width:16px;
      height:16px;
      position:relative;
      right:0;
      top:-15px;
      padding-right:2px;
      &:hover{
        border-radius:50%;
        background-color: #f97333c7;
        color:white;
      }
    }
  }
}
